<template>
  <div class="chart-page">
    <div class="chart-page-header chart-page-card">
      <div class="chart-page-left">
        <div class="chart-page-title">客户统计</div>
        <div>
          <div class="chart-page-value">{{ data.sumCustomerCount }}</div>
          <div class="chart-page-sub-title">全部客户</div>
        </div>
      </div>
      <EChart class="chart-page-top-chart" :options="topChart" />
    </div>

    <div class="chart-page-footer">
      <div class="chart-page-card chart-page-bottom">
        <div class="chart-page-card-header">
          <div class="chart-page-title">新增客户统计</div>
          <ElButton link type="primary" @click="viewAllAdd">全部数据</ElButton>
        </div>
        <div class="chart-page-date">
          <DateRangePicker
            v-model:startDate="params.addCustomerDateStart"
            v-model:endDate="params.addCustomerDateEnd"
            type="daterange"
            format="YYYY-MM-DD"
            valueFormat="YYYY-MM-DD"
            style="width: 220px;"
            @change="onChange"
          />
        </div>
        <EChart class="chart-page-bottom-chart" :options="leftChart" />
      </div>
      <div class="chart-page-card chart-page-bottom">
        <div class="chart-page-card-header">
          <div class="chart-page-title">流失客户统计</div>
          <ElButton link type="primary" @click="viewAllLoss">全部数据</ElButton>
        </div>
        <div class="chart-page-date">
          <DateRangePicker
            v-model:startDate="params.lossCustomerDateStart"
            v-model:endDate="params.lossCustomerDateEnd"
            type="daterange"
            format="YYYY-MM-DD"
            valueFormat="YYYY-MM-DD"
            style="width: 220px;"
            @change="onChange"
          />
        </div>
        <EChart class="chart-page-bottom-chart" :options="rightChart" />
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
import { ref, reactive, onMounted, computed } from 'vue'
import { getCustomerStatistics } from './api'
import EChart from '@/components/chart/EChart.vue'
import { graphic } from 'echarts'
import DateRangePicker from '@/components/form-item/DateRangePicker.vue'
import { lossDialog, addDialog } from './dialog'

const laoding = ref(false)
const params = reactive({
  addCustomerDateStart: '',
  addCustomerDateEnd: '',
  lossCustomerDateStart: '',
  lossCustomerDateEnd: ''
})
const data = ref<any>({})

const getData = () => {
  laoding.value = true
  getCustomerStatistics(params)
    .then(res => {
      data.value = res || {}
    })
    .finally(() => {
      laoding.value = false
    })
}

const topChart = computed(() => {
  const platformList = data.value.platformList || []
  const list = platformList.map(item => {
    const keys = Object.keys(item)
    const key = keys[0]
    return {
      label: key,
      value: item[key]
    }
  })
  return {
    grid: {
      top: '80PX',
      right: '40PX ',
      left: '40PX',
      bottom: '50PX'
    },
    xAxis: [{
      type: 'category',
      color: '#ADAEB0',
      data: list.map(i => i.label),
      axisPointer: {
        type: 'line'
      },
      axisLine: {
        lineStyle: {
          color: '#ADAEB0'
        }
      },
      axisLabel: {
        margin: 20,
        color: '#ADAEB0',
        textStyle: {
          fontSize: 12
        },
      },
      axisTick: {
        show: false
      }
    }],
    yAxis: [{
      axisLabel: {
        color: '#ADAEB0',
      },
      axisLine: {
        show: false
      },
      splitLine: {
        lineStyle: {
          color: '#ADAEB0'
        }
      }
    }],
    series: [{
      type: 'bar',
      data: list.map(i => i.value),
      barWidth: '20px',
      itemStyle: {
        normal: {
          color: new graphic.LinearGradient(0, 0, 0, 1, [{
            offset: 0,
            color: '#1E0EF8' // 0% 处的颜色
          }, {
            offset: 1,
            color: '#2D71FB' // 100% 处的颜色
          }], false),
          barBorderRadius: [4, 4, 4, 4],
          shadowColor: 'rgba(45, 113, 251, 1)',
          shadowBlur: 4,
        }
      },

      label: {
        normal: {
          show: true,
          position: ['0', '-20'],
          distance: 1,
          color: '#ADAEB0'
        }
      }
    }]
  }
})

const leftChart = computed(() => {
  const addList = data.value.addList || []
  const list = addList.map(item => {
    const keys = Object.keys(item)
    const key = keys[0]
    return {
      label: key,
      value: item[key]
    }
  })
  return {
    grid: {
      top: '80PX',
      right: '30PX',
      left: '40PX',
      bottom: '50px'
    },
    xAxis: [{
      type: 'category',
      color: '#ADAEB0',
      data: list.map(i => i.label),
      axisPointer: {
        type: 'line'
      },
      axisLine: {
        lineStyle: {
          color: '#ADAEB0'
        }
      },
      axisLabel: {
        margin: 20,
        color: '#ADAEB0',
        textStyle: {
          fontSize: 12
        },
      },
      axisTick: {
        show: false
      }
    }],
    yAxis: [{
      axisLabel: {
        color: '#ADAEB0',
      },
      axisLine: {
        show: false
      },
      splitLine: {
        lineStyle: {
          color: '#ADAEB0'
        }
      }
    }],
    series: [
      {
        name: '新增客户',
        type: 'line',
        smooth: true,
        symbol: 'circle',
        symbolSize: 5,
        showSymbol: false,
        data: list.map(i => i.value),
        lineStyle: {
          normal: {
            width: 2
          }
        },
        areaStyle: {
          normal: {
            color: new graphic.LinearGradient(0, 0, 0, 1, [{
                offset: 0,
                color: 'rgba(9, 77, 178, .5)'
            }, {
                offset: 0.8,
                color: 'rgba(9, 77, 178, 0)'
            }], false),
            shadowColor: 'rgba(0, 0, 0, 0.1)',
            shadowBlur: 10
          }
        },
        itemStyle: {
          normal: {
            color: '#094DB2',
            borderColor: '#094DB2',
            borderWidth: 12
          }
        }
      }
    ]
  }
})

const rightChart = computed(() => {
  const lossList = data.value.lossList || []
  const list = lossList.map(item => {
    const keys = Object.keys(item)
    const key = keys[0]
    return {
      label: key,
      value: item[key]
    }
  })
  return {
    grid: {
      top: '80PX',
      right: '30PX',
      left: '40PX',
      bottom: '50px'
    },
    xAxis: [{
      type: 'category',
      color: '#ADAEB0',
      data: list.map(i => i.label),
      axisPointer: {
        type: 'line'
      },
      axisLine: {
        lineStyle: {
          color: '#ADAEB0'
        }
      },
      axisLabel: {
        margin: 20,
        color: '#ADAEB0',
        textStyle: {
          fontSize: 12
        },
      },
      axisTick: {
        show: false
      }
    }],
    yAxis: [{
      axisLabel: {
        color: '#ADAEB0',
      },
      axisLine: {
        show: false
      },
      splitLine: {
        lineStyle: {
          color: '#ADAEB0'
        }
      }
    }],
    series: [
      {
        name: '新增客户',
        type: 'line',
        smooth: true,
        symbol: 'circle',
        symbolSize: 5,
        showSymbol: false,
        data: list.map(i => i.value),
        lineStyle: {
          normal: {
            width: 2
          }
        },
        areaStyle: {
          normal: {
            color: new graphic.LinearGradient(0, 0, 0, 1, [{
                offset: 0,
                color: 'rgba(255, 90, 0, .5)'
            }, {
                offset: 0.8,
                color: 'rgba(255, 90, 0, 0)'
            }], false),
            shadowColor: 'rgba(255, 90, 0, .1)',
            shadowBlur: 10
          }
        },
        itemStyle: {
          normal: {
            color: '#FF5A00',
            borderColor: '#FF5A00',
            borderWidth: 12
          }
        }
      }
    ]
  }
})

const onChange = () => {
  getData()
}

const viewAllLoss = () => {
  lossDialog.open()
}

const viewAllAdd = () => {
  addDialog.open()
}

onMounted(() => {
  getData()
})

defineOptions({
  name: 'CustomerClassificationData'
})
</script>

<style scoped lang="scss">
.chart-page {
  &-card {
    background: var(--el-color-white);
    border-radius: 4px;
  }
  &-header {
    box-sizing: border-box;
    height: 314px;
    display: flex;
    align-items: stretch;
  }
  &-left {
    box-sizing: border-box;
    height: 100%;
    width: 100px;
    padding: 18px 0 34px 0;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    align-items: center;
  }
  &-title {
    font-family: PingFangSC-Medium;
    font-weight: 500;
    font-size: 16px;
    color: #333333;
  }
  &-value {
    font-family: DOUYINSANSBOLD-GB;
    font-weight: GB;
    font-size: 36px;
    color: #333333;
  }
  &-sub-title {
    font-family: PingFangHK-Medium;
    font-weight: 500;
    font-size: 14px;
    color: #999999;
    margin-top: 4px;
  }

  &-top-chart {
    flex: 1;
    height: 100%;
  }

  &-footer {
    margin-top: 16px;
    height: 340px;
    box-sizing: border-box;
    display: flex;
    align-items: stretch;
    justify-content: space-between;
  }

  &-bottom {
    box-sizing: border-box;
    height: 100%;
    width: calc(50% - 9px);
    display: flex;
    flex-direction: column;
    position: relative;
  }
  &-bottom-chart {
    flex: 1;
    width: 100%;
  }
  &-card-header {
    font-family: PingFangSC-Medium;
    font-weight: 500;
    font-size: 16px;
    color: #333333;
    padding-top: 18px;
    padding-left: 20px;
    padding-right: 20px;
    display: flex;
    align-items: center;
    justify-content: space-between;
  }
  &-date {
    position: absolute;
    left: 20px;
    top: 50px;
    z-index: 10;
  }
}
</style>
